<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="300px">
        <div
          v-for="cache in cacheList"
          :key="cache"
          class="cache-box"
          style="display: flex; justify-content: space-between"
        >
          <div
            @click="
              selectId = cache.DSSIC_ID
              selectPath = cache.DSSIC_Path
              getDirectoryTree(cache.DSSIC_Path)
            "
          >
            {{ cache.USR_Name }}于{{ cache.DSSIC_UploadTime }}上传
          </div>
          <i
            style="margin-top: 14px; display: block"
            class="el-icon-arrow-right"
          ></i>
        </div>
      </el-aside>
      <el-aside width="300px">
        <el-button type="primary" v-if="selectId != 0" @click="importCache()">
          一键导入
        </el-button>
        <el-button v-if="selectId != 0" @click="deleteCache()">删除</el-button>
        <el-tree
          :data="data"
          :props="defaultProps"
          :expand-on-click-node="false"
          :default-expand-all="true"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button
                v-if="data.path != null"
                type="text"
                size="mini"
                @click="() => handleNodeClick(data)"
              >
                详情
              </el-button>

              <el-button
                type="text"
                size="mini"
                v-if="data.path != null"
                @click="() => changeDirectoryName(data)"
              >
                修改
              </el-button>
            </span>
          </span>
        </el-tree>
      </el-aside>
      <el-main>
        <div style="margin: 10px 0 30px 0; display: flex; flex-wrap: wrap">
          <div
            style="
              position: relative;
              width: 200px;
              height: 200px;
              margin: 10px 20px;
            "
            v-for="item in files"
            :key="item"
          >
            <el-image
              style="width: 200px; height: 200px"
              :src="item"
              :preview-src-list="files"
            ></el-image>
            <div @click="changeFileName(item)" class="image-info">
              {{ getFileName(item) }}
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import {
  GetDirectoryTree,
  GetDirectoryFile,
  GetSurveyImageCache,
  ImportCacheImage,
  DeleteCacheImage,
  ChangeDirectoryName,
  ChangeFileName,
} from '@/api/project/surveyUpload.js'
import { baseURL } from '@/config'
export default {
  data() {
    return {
      cacheList: [],
      selectId: 0,
      data: [],
      files: [],
      selectPath: '',
      selectFilePath: null,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  methods: {
    handleNodeClick(data) {
      var that = this
      if (data.path == null) {
        return
      }
      that.selectFilePath = data
      GetDirectoryFile(data.path).then((r) => {
        that.files = []
        r.data.forEach((file) => {
          that.files.push('/图片中转站/' + file.split('图片中转站')[1])
        })
      })
    },
    changeDirectoryName(data) {
      var that = this
      this.$prompt('请输入文件名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: data.label,
      })
        .then(({ value }) => {
          ChangeDirectoryName(data, value).then((r) => {
            that.getDirectoryTree(that.selectPath)
          })
        })
        .catch(() => {})
    },
    changeFileName(data) {
      var that = this
      this.$prompt('请输入文件名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: that.getFileName(data).split('.')[0],
      })
        .then(({ value }) => {
          ChangeFileName(data, value).then((r) => {
            that.handleNodeClick(that.selectFilePath)
          })
        })
        .catch(() => {})
    },
    importCache() {
      var that = this
      ImportCacheImage(that.selectId).then((r) => {
        that.$alert('导入成功', {
          confirmButtonText: '确定',
          callback: (action) => {
            that.getSurveyImageCache()
            that.data = []
          },
        })
      })
    },
    deleteCache() {
      var that = this
      this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteCacheImage(that.selectId).then((r) => {
            that.$message({
              type: 'success',
              message: '删除成功!',
            })
            that.getSurveyImageCache()
            that.data = []
          })
        })
        .catch(() => {
          that.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    getDirectoryTree(path) {
      var that = this
      GetDirectoryTree(path).then((r) => {
        that.data = [JSON.parse(r.data)]
      })
    },
    getSurveyImageCache() {
      var that = this
      GetSurveyImageCache().then((r) => {
        that.cacheList = r.data.datas
      })
    },
    getFileName(path) {
      var match = path.match(/\\([^\\]+)$/) // 使用正则表达式匹配反斜杠后的部分
      return match ? match[1] : path // 如果匹配成功则返回匹配的部分作为文件名，否则返回原字符串
    },
  },
  created: function () {},
  mounted: function () {
    //this.getDirectoryTree()
    this.getSurveyImageCache()
  },
}
</script>
<style scoped>
.cache-box {
  line-height: 40px;
  padding: 0 8px;
  color: blue;
}
.image-info {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.7;
  color: #fff;
  padding: 2px 5px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>